<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>商品详情</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<p th:text="'Hello:'+${user?.nickname}"></p>


<table cellpadding="0" cellspacing="0" border="1" width="700px">
  <thead>
  <tr>
    <th>商品名称</th>
    <th>图片</th>
    <th>原价</th>
    <th>秒杀价</th>
    <th>库存数量</th>
    <th>商品描述</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td th:text="${goods.name}"></td>
    <td th:text="${goods.img}"></td>
    <td th:text="${goods.price}"></td>
    <td th:text="${goods.priceSpike}"></td>
    <td th:text="${goods.stock}"></td>
    <td th:text="${goods.detail}">详情</td>
  </tr>
  </tbody>
</table>
<br>
<br>
<div>
  <div th:if="${status eq 0}">
    秒杀开始时间：
    <span th:text="${#dates.format(goods.startDate, 'yyyy-MM-dd HH:mm:ss')}"></span> <br>
    <div style="display: inline-block">
      倒计时 <span id="remain" th:text="${remain}"></span> 秒
    </div>
  </div>

  <form th:if="${status eq 1}" method="post" th:action="@{/seckill/{id}(id=${goods.id})}">
    <span>秒杀进行中</span><br>
    <input type="hidden" id="id" name="id" th:value="${goods.id}">
    <button type="submit">立即秒杀</button>
  </form>

  <span th:if="${status eq 2}">秒杀已结束</span>
</div>

<div id="dates"
     th:data-start-date="${#dates.formatISO(goods.startDate)}"
     th:data-end-date="${#dates.formatISO(goods.endDate)}">
</div>

<script>
  $(function () {
    const $remain = $("#remain");
    if ($remain.length <= 0) {
      return;
    }
    const $dates = $("#dates");
    const startDate = new Date($dates.data("start-date"));
    let handler;
    const now = new Date();
    if (now < startDate) {
      handler = setInterval(function () {
        const remain = Math.floor((startDate - new Date()) / 1000);
        if (remain >= 0) {
          $remain.text(remain)
        } else {
          clearInterval(handler);
          window.location.reload();
        }
      }, 1000);
    }
  });
</script>
</body>
</html>
